<template>
  <el-upload
    class="avatar-uploader el-upload--text"
    :action="action"
    :show-file-list="false"
    :on-success="handleVideoSuccess"
    :before-upload="beforeUploadVideo"
    :on-progress="uploadVideoProcess"
  >
    <i
      v-if="storageurl !== '' && videoFlag === false"
      class="el-icon-check avatar-uploader-icon"
      style="color: green"
    ></i>
    <i
      v-if="storageurl === '' && videoFlag === false"
      class="el-icon-plus avatar-uploader-icon"
    ></i>
    <el-progress
      v-if="videoFlag === true"
      type="circle"
      :percentage="videoUploadPercent"
      style="margin-top: 30px"
    ></el-progress>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      storageurl: '', // 视频地址
      videoFlag: false,
      videoUploadPercent: 0,
    }
  },
  props: {
    action: {
      type: String,
    },
  },
  methods: {
    // 验证视频格式
    beforeUploadVideo(file) {
      const isLt100M = file.size / 1024 / 1024 < 100
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb',
        ].indexOf(file.type) === -1
      ) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt100M) {
        this.$message.error('文件视频不能超过100MB')
        return false
      }
      return true
    },
    // 上传进度显示
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = Math.floor(event.percent)
    },

    // 获取上传图片地址
    handleVideoSuccess(res, file) {
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (res.code === 200) {
        this.$message({
          message: '上传成功',
          type: 'success',
        })
        this.storageurl = res.data
      } else {
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
  },
}
</script>

<style>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}
.el-upload {
  margin-top: 50px;
  margin-left: 60px !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #050505 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
</style>
